<template>
  <div>
    <myBreadcrumb></myBreadcrumb>
    <el-upload
      accept=".png,.jpg,.jpeg"
      :action="uploadUrl()"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="onsuccess"
      :beforeUpload="beforeAvatarUpload"
      :data="uploadparams"
      :limit="2"
      :on-exceed="onexceed"
      multiple
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import myBreadcrumb from "@/views/Breadcrumb.vue";
export default {
  data() {
    return {
      uploadparams: {
        id: 110,
      },
      dialogImageUrl: "",
      dialogVisible: false,
      imgpath: [],
    };
  },
  computed: {
    myData() {
      return {
        id: 58,
        name: "小红",
      };
    },
  },
  components: {
    myBreadcrumb,
  },
  methods: {
    //超出文件数限制
    onexceed(files, fileList) {
      this.$message("超出最大上传文件数限制！最多上传2个文件");
    },
    // 上传前对文件进行验证
    beforeAvatarUpload(file) {
      return true;
      const extension = file.name.split(".")[1] === "jpg";
      const extension2 = file.name.split(".")[1] === "png";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        alert("上传文件只能是 jpg、png 格式!");
      }
      if (!isLt2M) {
        alert("上传模板大小不能超过 10MB!");
      }
      return extension && extension2 && isLt2M;
    },
    uploadUrl: function () {
      return "http://localhost:53464/api/values/UpLoadImageFiles1";
    },
    //删除事件
    handleRemove(file, fileList) {
      console.log("删除事件");
      console.log(file, fileList);
    },
    //预览事件
    handlePictureCardPreview(file) {
      console.log("预览事件");
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传成功
    onsuccess(reponse, file, fileList) {
      console.log("上传成功");
      this.imgpath.push(reponse);
      console.log(this.imgpath);
    },
  },
};
</script>

<style>
</style>